<template>
	<div>
		<div class="ques-opt-title">
			<i class="star" v-if="dataVal?.attribute?.required"></i>
			<i>{{ index + 1 }}、</i>
			<div contenteditable="true" @keydown="preventEnter" @blur="dataChange($event, dataVal, 'title')">{{ dataVal.title }}</div>
			<div class="ques-opt-title-ope">
				<span @click="$emit('remove', dataVal)" class="delete">✖</span>
				<span class="move">☝</span>
				<input type="checkbox" v-model="isRequired" />
			</div>
		</div>
		<div class="ques-opt-body">
			<div class="ques-opt-item" v-for="(element, index) in dataVal.children" :key="element.id">
				<div class="ques-opt-label">
					<span class="k-radiobox"></span>
					<div class="trans-in" contentEditable="true" @keydown="preventEnter" @blur="dataChange($event, element, 'title')"> {{ element.title }}</div>
					<div v-if="scoreIs">
						（ <span contenteditable="true" @keydown="preventEnter" @blur="doneScore($event, element)">{{ element?.attribute?.score }}</span> 分 ）
					</div>
				</div>
				<div class="ques-opt-label-ope">
					<span @click="removeOption($event, element, dataVal)" class="delete">✖</span>
				</div>
			</div>
			<div class="ques-opt-add">
				<span @click="addOption"> ✚ 添加选项 </span>
			</div>
		</div>
	</div>
</template>

<script>
import common from "./common.js";
export default {
	mixins: [common],
	methods: {
		addOption() {
			//如果scoreIs为true，则添加选项时，默认分数为1
			let attribute = {};
			if (this.scoreIs) {
				attribute = { score: this.dataVal.children.length };
			}
			this.dataVal.children.push({ id: this.tool.ids.get(), title: "选项" + (this.dataVal.children.length + 1), attribute });
		},
		removeOption(event, option, data) {
			event.stopPropagation();
			const input = event.target;
			if (data.children.length === 2) {
				this.tip({ msg: "至少保留2个选项！" });
				return;
			}
			data.children.splice(data.children.indexOf(option), 1);
		}
	}
};
</script>
